import React, { Component } from 'react'
import { Redirect, Route } from 'react-router-dom'
import { hasToken } from 'utilis/storage'

class AuthRoute extends Component {
  render() {
    const { component: Component, ...rest } = this.props
    // 解构剩余的对象出来  会得到 path={'path'}之类的
    // let objet = { a: 'a', b: 'b', c: 'c' }
    // const { a, ...o } = objet
    // console.log(o)
    // // { b: 'b', c: 'c' }
    // console.log(this.props)

    return (
      <Route
        //传入其他属性 就是path
        {...rest}
        render={(routeProps) => {
          // 这里的routeProps是登陆后默认传递的三个参数 history location match
          if (hasToken()) {
            // Component大写重命名了下,component本身就是Layout组件 所有用组件的形式 对应之前接受的是 component={Layout}
            return <Component {...routeProps} />
          }
          return (
            <Redirect
              to={{
                pathname: '/login',
                // search: `?from=${routeProps.location.pathname}`,
                state: {
                  from: routeProps.location.pathname,
                },
              }}
            ></Redirect>
          )
          //
          // 另一种写法  用props拿到的history的方法跳转
          // props.history.push('/login')
        }}
      ></Route>
    )
  }
}

export default AuthRoute
